<template>
  <div class="provide-inject-demo">
    <h4>Provide/Inject 示例</h4>
    <div class="component-content">
      <p>主题颜色: {{ theme }}</p>
      <el-button @click="toggleTheme">切换主题</el-button>
      
      <!-- 子组件 -->
      <injected-component class="child-component" />
    </div>
  </div>
</template>

<script>
import InjectedComponent from './InjectedComponent.vue'

export default {
  name: 'ProvideInjectDemo',
  components: { InjectedComponent },
  
  data() {
    return {
      theme: 'light'
    }
  },
  
  provide() {
    return {
      theme: this.theme,
      toggleTheme: this.toggleTheme
    }
  },
  
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
    }
  }
}
</script>

<style scoped>
.provide-inject-demo {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
}

.component-content {
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

.child-component {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

h4 {
  margin: 0 0 10px 0;
  color: #606266;
}
</style> 